<template>
  <div class="highlight-test">
    <h2>高亮功能测试</h2>
    
    <div class="search-section">
      <label>搜索关键词:</label>
      <input 
        v-model="searchKeyword" 
        placeholder="输入关键词进行测试" 
        @input="updateHighlight"
      />
    </div>
    
    <div class="test-section">
      <h3>测试文本:</h3>
      <div class="test-text" v-html="highlightedText"></div>
    </div>
    
    <div class="product-section">
      <h3>商品测试:</h3>
      <div 
        v-for="product in testProducts" 
        :key="product.id" 
        class="product-item"
      >
        <div class="product-name" v-html="highlightText(product.name)"></div>
        <div class="product-desc" v-html="highlightText(product.description)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HighlightTest',
  data() {
    return {
      searchKeyword: '小米',
      testText: '这是一个测试文本，其中包含小米手机和华为手机的介绍。小米手机性价比很高，华为手机拍照效果出色。',
      testProducts: [
        {
          id: 1,
          name: '小米手机 Redmi Note 10',
          description: '小米公司推出的高性价比智能手机，配备大容量电池和高清摄像头'
        },
        {
          id: 2,
          name: '华为手机 Mate 40',
          description: '华为旗舰手机，搭载麒麟芯片，拍照效果出色'
        },
        {
          id: 3,
          name: '苹果手机 iPhone 12',
          description: '苹果公司最新款智能手机，拥有强大的A14芯片'
        }
      ]
    }
  },
  computed: {
    highlightedText() {
      return this.highlightText(this.testText);
    }
  },
  methods: {
    // 转义正则表达式特殊字符
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    },
    
    // 高亮文本中的关键词
    highlightText(text) {
      if (!this.searchKeyword || !text) {
        return text;
      }
      
      const keyword = this.searchKeyword.trim();
      if (!keyword) {
        return text;
      }
      
      try {
        // 转义正则表达式特殊字符
        const escapedKeyword = this.escapeRegExp(keyword);
        
        // 创建正则表达式，忽略大小写，全局匹配
        const regex = new RegExp(`(${escapedKeyword})`, 'gi');
        
        // 使用replace方法替换匹配的关键词，添加高亮标签
        return text.replace(regex, '<span style="background-color: #ffeb3b; font-weight: bold; padding: 2px 4px; border-radius: 3px;">$1</span>');
      } catch (error) {
        console.error('高亮处理出错:', error);
        return text;
      }
    },
    
    updateHighlight() {
      // 触发重新计算
      this.$forceUpdate();
    }
  }
}
</script>

<style scoped>
.highlight-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.search-section {
  margin-bottom: 20px;
}

.search-section input {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 10px;
}

.test-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.test-text {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 10px;
}

.product-section {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.product-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-desc {
  font-size: 14px;
  color: #666;
}
</style>